<template>
  <view class="order-container">
    <u-tabs-swiper
      ref="tabs"
      :list="tabs"
      :is-scroll="false"
      font-size="26"
      bar-width="50"
      bar-height="2"
      active-color="#3745eb"
      :bold="false"
      :current="currentTab"
      @change="changeTab"
    ></u-tabs-swiper>
    <swiper
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item v-for="(item, index) in tabs" :key="index">
        <scroll-view
          scroll-y
          style="height: 90vh;width: 100%;"
          @scrolltolower="onreachBottom"
        >
          <view class="coupon-card" v-for="(item, i) in couponData" :key="i">
            <view class="coupon-box">
              <view class="box-content">
                <view class="coupon-title">
                  <text>¥10</text>
                </view>
                <view class="coupon-content">
                  <text>10元新人有礼</text>
                  <text>34</text>
                  <text>有效期： 2021-10-12 - 2021-10-13</text>
                </view>
                <view class="coupon-right">
                  <text>去使用</text>
                </view>
              </view>
            </view>
          </view>
          <view class="empty" v-show="isShowEmpty">
            <image
              style=""
              :mode="scaleToFill"
              src="./../../static/images/empty.png"
            ></image>
            <text>暂无优惠券</text>
          </view>
          <view v-show="!isShowEmpty">
            <u-loadmore
              :status="loadStatus"
              :icon-type="iconType"
              :load-text="loadText"
            />
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>

import { getCoupons } from "@/api/order";
export default {
  data() {
    return {
      tabs: [
        {
          name: "未领取",
        },
        {
          name: "未使用",
        },
        {
          name: "已使用",
        },
        {
          name: "已过期",
        },
      ],
      currentTab: 0,
      swiperCurrent: 0,
      loadStatus: "nomore",
      iconType: "flower",
      loadText: {
        loadmore: "轻轻上拉",
        loading: "努力加载中",
        nomore: "没有更多订单了",
      },
      couponData:[
        {},
        {},
        {},
      ]
    };
  },
  computed:{
    // 为真时，显示empty图标
    isShowEmpty:{
      get(){
         return this.couponData.lenght === 0
      }
    }
  },
  mounted(){
    this.fetchSearch()
  },
  methods: {
    fetchSearch(){
      getCoupons({page:1,size:10,type:-1}).then(res =>{
        console.log(res);
      } )
    },
    changeTab(index) {
      console.log(index);
      this.swiperCurrent = index;
      // this.fetchSearch()
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.tabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.currentTab = current;
    },
    // scroll-view到底部加载更多
    onreachBottom() {},
  },
};
</script>

<style lang="scss" scoped>
.coupon-card {
  .coupon-box {
    margin: 30rpx;


    & .box-content{
      display: flex;
      flex-flow: row nowrap;
      overflow: hidden;
      border-radius: 15rpx;
      background-color: white;
    }

    & .box-content{

      .coupon-title,.coupon-right{
        flex:0 0 auto;
      }

      .coupon-title{
        width: 130rpx;
        position: relative;
        &>text{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          font-size: 30rpx;
          font-weight: bold;
          color: #f46c1e;
        }
      }

      .coupon-content{
        width: 100rpx;
        flex:1 0 auto;
        display: flex;
        flex-flow: column nowrap;
        padding: 20rpx;
        &>text:nth-child(1){
          font-size: 30rpx;
          font-weight: bold;
          color: black;
        }

        &>text{
          font-size: 22rpx;
          
          color: #ccc;
          line-height: 30rpx;
        }
      }
    
      .coupon-right{
        &>text{
          float: right;
          color: white;
          background-color: #3745eb;
          line-height: 60rpx;
          padding: 0 20rpx;
          border-top-right-radius: 15rpx;
          border-bottom-left-radius: 15rpx;
        }
      }
    }
  }
}

.empty {
  width: 100%;
  padding: 80rpx;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;

  & > image {
    width: 300rpx;
    height: 300rpx;
  }
  & > text {
    line-height: 80rpx;
    color: #dbdbdb;
    font-size: 24rpx;
  }
}
</style>
